<template>
  <div>
    <el-table
      ref="multipleTable"
      v-loading="loading"
      :data="tableData"
      border
      fit
      :row-key="getRowkeys"
      @row-click="handleRowClick"
      @sort-change="handleSort"
      @filter-change="filterHandler"
      @selection-change="handleSelectionChange"
    >
      <!-- 多选框 -->
      <el-table-column v-if="selectionShow" :selectable="checkSelectable" type="selection" width="50" align="center" :reserve-selection="true" />
      <el-table-column v-if="indexShow" type="index" :index="typeIndex" label="序号" width="50" align="center" />
      <el-table-column
        v-for="(th, key) in tableHeader"
        :key="key"
        :prop="th.prop"
        :label="th.label"
        :fixed="th.fixed"
        :sortable="th.custom?'custom':false"
        :filters="th.filters"
        :column-key="th.columnKey"
        :filtered-value="th.filteredValue"
        :filter-multiple="th.filterMultiple"
        :min-width="th.minWidth || 120"
        :width="th.width"
        :show-overflow-tooltip="!th.noTooltip"
        :class-name="th.className"
        :align="th.align || 'center'"
      >
        <template slot-scope="scope">
          <!-- 自定义插槽 -->
          <slot v-if="th.type == 'slot'" :name="th.prop" :row="scope.row" />
          <!-- 操作按钮 -->
          <template v-else-if="th.type == 'button'">
            <template v-for="(o, i) in th.operation">
              <el-button
                v-if="o.isHide ? o.isHide(scope.row) : true"
                :key="i"
                :type="o.type || 'text'"
                @click="o.clickFun(scope.row)"
                @mousedown="o.mousedown(scope.row, $event)"
              >
                {{ o.name }}
              </el-button>
            </template>
          </template>
          <!-- 点击跳转页面 -->
          <router-link v-else-if="th.type == 'router'" :to="{path: th.path, query: th.query(scope.row)}">
            <span
              :class="typeof th.itemClassName == 'function'
                ? th.itemClassName(scope.row) : th.itemClassName"
              v-html="handleFilter(th, scope.row, th.prop)"
            />
          </router-link>
          <!-- 输入框 -->
          <el-input
            v-else-if="typeof th.type == 'function' ? th.type(scope.row) == 'input': th.type == 'input'"
            v-model="scope.row[th.prop]"
            @keyup.enter.native="th.change && th.change(scope.row)"
          />
          <el-switch
            v-else-if="th.type == 'switch'"
            v-model="scope.row[th.prop]"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
            @change="th.handelChange(scope.row, $event)"
          />
          <span
            v-else
            :class="typeof th.itemClassName == 'function' ? th.itemClassName(scope.row) : th.itemClassName"
            v-html="handleFilter(th, scope.row, th.prop)"
          />
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination" :style="{textAlign:`${pagination_loaction}`}">
      <el-pagination
      v-if="total > 0"
      background
      layout="total, prev, pager, next"
      class="text-center mt_20"
      :current-page="page"
      :page-size="limit"
      :total="total"
      @current-change="handleCurrentChange"
    />
    </div>

  </div>
</template>

<script>
export default {
  name: 'CompTable',
  filters: {
    formatters (val, format) {
      if (typeof (format) === 'function') {
        return format(val)
      } else return val
    }
  },
  props: {
    showRowKey: {
      type: Boolean,
      default: false
    },
    tableData: {
      type: Array,
      default: function () {
        return []
      }
    },
    tableHeader: {
      type: Array,
      default: function () {
        return []
      }
    },
    multipleSelection: {
      type: Array,
      default: function () {
        return []
      }
    },
    loading: {
      type: Boolean,
      default: false
    },
    selectionShow: {
      type: Boolean,
      default: false
    },
    indexShow: {
      type: Boolean,
      default: false
    },
    page: {
      type: Number,
      default: 1
    },
    limit: {
      type: Number,
      default: 10
    },
    total: {
      type: Number,
      default: 0
    },
    pagination_loaction: {
      type: String,
      default: 'right'
    }
  },
  methods: {
    // 处理表格序号
    typeIndex (index) {
      const vm = this // 处理分页数据的 index
      return (vm.page - 1) * vm.limit + index + 1
    },
    // 数据处理
    handleFilter (item, val, prop) {
      let value = val[prop]
      if (item.templet) value = item.templet(val)
      return item.filter ? this.$options.filters[item.filter](val[prop]) : value
    },
    handleSelectionChange (val) {
      this.$emit('multiple-Selection', val)
    },
    handleSort (sort) {
      this.$emit('sort-events', sort)
    },
    filterHandler (filters) {
      this.$emit('filter-events', filters)
    },
    // 当前页改变触发
    handleCurrentChange (val) {
      this.$emit('current-events', val)
    },
    handleRowClick (row, column) {
      this.$emit('handle-row-click', row, column)
    },
    checkSelectable (row) {
      let isshow = false
      if (row.status === 1) {
        isshow = false
      } else {
        isshow = true
      }
      return isshow

      // return !row.status || row.status === 1
    },
    getRowkeys (row) {
      if (this.showRowKey) {
        return row.bill_data_id
      }
    },
    // 清空
    clearSelection () {
      this.$refs.multipleTable.clearSelection()
    }
  }
}
</script>

<style>
body .el-table th.gutter {
  display: table-cell!important;
}
body .pagination {
  margin-top: 10px;
}
</style>
